<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步:引入echarts核心库 -->
    <script src="./echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            margin: 50px auto;
            border: 1px dashed pink;
        }
    </style>
</head>

<body>
    <!-- 准备一个容器:展示图形图标地方 务必要有宽度与高度-->
    <div class="box"></div>
</body>

</html>
<script>
    //柱状图
    //第一步:echarts.init初始化echarts实例
    let mycharts = echarts.init(document.querySelector('.box'));
    //第二步:初始化配置项
    //设置配置项:(配置对象,里面K你能随便写吗?)
    let option = {
        dataZoom:{},
        //提示框组件
        tooltip: {
            textStyle: {
                color: 'skyblue'
            }
        },
        //工具栏组件
        toolbox:
        {
            show: true,
            feature: {
                saveAsImage: {},

                dataView: {
                    readOnly: false
                },
                magicType: {
                    type: ["line", "bar"]
                },
                restore: {},
                dataZoom: {
                    yAxisIndex: "none"
                },

            }

        },
        //图例组件
        legend: {},
        //x轴配置项
        xAxis: {
            //data:设置水平轴底部的文字
            //x轴设置data,Y轴轴线消息了
            data: ['军事', '游戏', '人生', '直播', '财经']

        },
        //y轴
        yAxis: {

        },
        //系列配置项:绝对重要,因为系列配置项能决定显示什么样的图形、图标
        series: [
            {
                name: '柱状图',
                type: 'bar',//图标的类型------柱状图
                data: [10, 20, 30, 40, 50],//柱状图数据
                //图形上面标签展示
                label: {
                    show: true,//展示文字标签
                    rotate: 45,//旋转
                    position: 'top',//文字位置
                    color: 'yellowgreen',
                    fontSize: 18,
                    // backgroundColor: 'black',
                    // shadowColor: 'yellow',
                    // shadowOffsetX: 10,
                },

                itemStyle: {//设置全部柱状图的颜色,支持渐变
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'red' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'purple' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }
            ,
            {
                type: 'line',
                name: '折线',
                data: [11, 22, 44, 2, 77, 88, 33, 21, 96]
            }
        ]

    };
    //设置配置项
    mycharts.setOption(option);
</script>